<template>
	<NavBar title="订单详情" icon="left" />
<view class="bg-[#edeff6] pt-2 pb-2">
	<!-- 1.基本信息 -->
		<view class=" bg-white   p-2  m-4 mt-0 rounded-md">
			<view class=" mt-1 flex">
				<view class="w-[50%]">
					<uni-icons class=" align-middle" type="person" size="22" color="#687181"></uni-icons>
					收件人：{{info.recipient}}
				</view>
				<view>
					<uni-icons class=" align-middle" type="photo" size="22" color="#687181"></uni-icons>
					联系电话：{{info.mobilePhone}}
				</view>
			</view>
			<view class="mt-1">
				<uni-icons class=" align-middle" type="location" size="22" color="#687181"></uni-icons>
				收货地址：{{info.address}}
			</view>
			<view class="mt-1">
				收货方式：{{info.serviceMethod}}
			</view>
		</view>
		<!-- 2.单号 -->
		<view class=" bg-white  p-2  m-4 rounded-md" v-if="info?.bzDeclarationVoList"
			v-for="item in info?.bzDeclarationVoList">
			<view class="mt-1 text-[#3077eb]">
				单号
			</view>
			<view class=" mt-1 flex">
				<view class="w-[50%]">
					承运商：{{item.companyName}}
				</view>
				<view>
					单号：{{item.id}}
				</view>
			</view>
			<view class=" mt-1 flex">
				<view class="w-[50%]">
					订单号 ：{{ Id }}
				</view>
				<view> 货物品名 ：{{item.cargoName}}
				</view>
			</view>
			<view class=" mt-1 flex">
				<view class="w-[50%]">
					实际重量 ：{{item.actualWeight}}
				</view>
				<view>
					收费重 ：{{info.volumeWeight}}
				</view>
			</view>
			<view>
				备注 ：{{item.remarks}}
			</view>
		</view>
	<!-- 3.费用明细 -->
		<view class=" bg-white  p-2  m-4 rounded-md" >
			<view class="mt-1 text-[#3077eb]">
	费用明细
			</view>
			<view class=" mt-1 flex">
				<view class="w-[50%]">
					包税费用  ：{{info.taxFee}}
				</view>
				<view>
					超长费用  ：{{info.overlengthFee}}
				</view>
			</view>
			<view class=" mt-1 flex">
				<view class="w-[50%]">
					保价金额   ：{{info.insuranceAmount}}
				</view>
				<view> 保价手续费   ：{{info.insuranceAmount}}
				</view>
			</view>
			<view class=" mt-1 flex">
				<view class="w-[50%]">
					代收货款   ：{{info.commissionedGoods}}
				</view>
				<view>
					   代收手续费   ：{{info.collectionServiceFee}}
				</view>
			</view> 
			<view class=" mt-1 flex">
				<view class="w-[50%]">
					积分抵扣 ：{{info.pointsFee}}
				</view>
				<view>
					   集运券抵扣   ：{{info.useCouponAmount}}
				</view>
			</view> 
			<view class=" mt-1 flex">
				<view class="w-[50%]">
					地址附加费   ：{{info.addressAdditionalFee}}
				</view>
				<view>
					   垫付费   ：{{info.advancePaymentFee}}
				</view>
			</view> 
		</view>
	
	
	<!-- 4。 -->
		<view class=" bg-white text-[#aa342d]  p-2  m-4 rounded-md"  > 
			<view class=" mt-1 flex">
				<view class="w-[50%]">
					计费重量：{{info.chargingWeight}}
				</view>
				<view>
					<!-- 0:余额 1:微信 2:支付宝 --> 
					支付方式：
					<text v-if="info.paymentMethod === 0">余额</text>
					<text v-if="info.paymentMethod === 1">微信</text>
					<text v-if="info.paymentMethod === 2">支付宝</text>
				</view>
			</view>
			<view class=" mt-1 flex">
				<view class="w-[50%]">
					运费 ：{{ info.shippingFee}}
				</view>
				<view> 实付费用 ：{{info.dueFee}}
				</view>
			</view> 
		</view>
	
</view>
</template>

<script setup>
	import * as orderApi from '@/api/modules/order'    
	const info = ref({})
	const  Id = ref(0)  
	const getOrderDetails = 	async() => {
		const { data } = await orderApi.orderDetailsAPI(Id.value)
		 info.value = data
	}
	
	onMounted(() => {
		const instance = getCurrentInstance().proxy
		const eventChannel = instance.getOpenerEventChannel(); 
		eventChannel.on('change', function(data) {  
			console.log(1,data);
			Id.value = data.orderId
			 getOrderDetails()
		})
	})
	  
</script>

<style  lang="scss">
	.item {
		width: 50%
	}

	view {

		font-size: 12px
	}
</style>